<!-- 
canvas标签
    1）属于html标签
        - 避免兼容性问题
            * 标签中间写上提示
            * 或者引入html5shiv.js、excanvas.min.js

    2）默认行内元素，通常转为块元素
        - display:block;

    3）画布宽高的设置比较特殊
        - 错误
            <canvas style="width: 500px; height: 500px;"></canvas>
            <style>
                canvas {
                    width: 500px;
                    height: 500px;
                }
            </style>
            <script>
                cvs.style.width=500;
                cvs.style.height=500;
            </script>
        - 正确
            <canvas width="500" height="500"></canvas>
            <script>
                cvs.width=500;
                cvs.height=500;
            </script>

    4）基本使用
        第一步：定义canvas标签html结构
        第二步：获取canvas标签对象
        第三步：获取2d上下文对象（目前主要是2d应用，3d了解即可）
-->
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .canvas {
        display: block;
        margin: 25px auto;
        border: 1px solid #aaa;
    }
</style>

<canvas class="canvas">当前的浏览器不支持Canvas，请升级浏览器版本或更换浏览器！</canvas>

<script>
    window.addEventListener("load", function () {
        const cvs = document.querySelector(".canvas");
        cvs.width = 1000;
        cvs.height = 650;
        const ctx = cvs.getContext("2d");
        // ---------------------------------- start
        // 此处，利用ctx开始绘图
        // ---------------------------------- end
    });
</script>
